<template>
  <el-dialog
    v-if="visible"
    :title="info.title"
    :visible.sync="visible"
    append-to-body
    center
    width="760px"
    :before-close="handleCancel"
  >
    <el-form
      ref="formDate"
      label-suffix=":"
      label-width="120px"
      :rules="rules"
      :model="form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="加班类型" prop="type">
            <el-select v-model="form.type" size="small" style="width: 100%">
              <el-option
                v-for="(item, index) in overtime_types"
                :key="item"
                :label="item"
                :value="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加班时间段" prop="pattern">
            <el-select v-model="form.pattern" size="small" style="width: 100%">
              <el-option
                v-for="(item, index) in overtime_parts"
                :key="item"
                :label="item"
                :value="index"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="begin_time">
            <el-date-picker
              v-model="form.begin_time"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              type="datetime"
              size="small"
              clearable
              style="width: 100%"
              @change="getDuration"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="end_time">
            <el-date-picker
              v-model="form.end_time"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              type="datetime"
              size="small"
              clearable
              style="width: 100%"
              @change="getDuration"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加班时长" prop="duration">
            <el-input-number
              v-model="form.duration"
              size="mini"
              :step="1"
              :min="1"
              :step-strictly="true"
            />
            小时
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="加班事由" prop="reason">
            <el-input
              v-model="form.reason"
              type="textarea"
              :rows="4"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="4"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="抄送" prop="ccs">
            <VerifyCC v-model="form.ccs" :ccs="ccs" />
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button type="primary" size="small" @click="handleBeforeTo()"
              >提 交</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// import VerifyCC from '@/myComponents/VerifyCC'
import svf from '../../util/svf'

export default {
  // components: { VerifyCC },
  extends: svf,
  data() {
    return {
      approve_key: 'PROCESS_OVERTIME',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        },
      },
      rules: {
        type: [
          { required: true, trigger: 'blur', message: '加班类型不可为空' },
        ],
        begin_time: [
          { required: true, trigger: 'blur', message: '开始时间不可为空' },
        ],
        end_time: [
          { required: true, trigger: 'blur', message: '结束时间不可为空' },
        ],
        duration: [
          { required: true, trigger: 'blur', message: '时长（小时）不可为空' },
        ],
        pattern: [
          { required: true, trigger: 'blur', message: '加班时间段不可为空' },
        ],
        reason: [
          { required: true, trigger: 'blur', message: '加班事由不可为空' },
        ],
      },
    }
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.info.type && this.info.type === 'again') {
          this.initApply(this.info.edit)
        } else {
          this.form = this.info.edit
        }
        // this.queryCcs()
      }
    },
  },
  mounted() {},
  methods: {
    handleBeforeTo() {
      this.validate().then(() => {
        const e = {}
        e.files = this.form.files
        e.approve_key = this.approve_key

        e.des = '加班类型: ' + this.overtime_types[this.form.type]
        e.des += ' 加班时间：'
        e.des += this.form.begin_time
        e.des += ' ~ '
        e.des += this.form.end_time

        e.ccs = this.form.ccs
        e.forms = JSON.stringify(
          this.createForms([
            [
              '加班类型',
              this.overtime_types[this.form.type],
              this.form.type,
              'type',
            ],
            [
              '开始时间',
              this.form.begin_time,
              this.form.begin_time,
              'begin_time',
            ],
            ['结束时间', this.form.end_time, this.form.end_time, 'end_time'],
            [
              '加班时长',
              this.form.duration + '小时',
              this.form.duration,
              'duration',
            ],
            [
              '加班时间段',
              this.overtime_parts[this.form.pattern],
              this.form.pattern,
              'pattern',
            ],
            ['加班事由', this.form.reason, this.form.reason, 'reason'],
            ['备注', this.form.remark, this.form.remark, 'remark'],
          ])
        )
        this.handleCreate(e)
      })
    },
    getDuration() {
      // let begin_time = this.form.begin_time
      // let end_time = this.form.end_time
      // if(begin_time && end_time) {
      //   let begin =(new Date(begin_time)).getTime()
      //   let end = (new Date(end_time)).getTime()
      //   let duration = parseInt((end - begin)/1000/60/60)
      //   this.$set(this.form, 'duration', duration)
      // }
    },
  },
}
</script>

<style></style>
